<template>
	<view>
		<view class="content">
			<view class="main">
				<image class="title" src="../../static/img/title.png"></image>
				<div class="head">
				</div>
				<view class="banner">
					<image class="banner-img" src="../../static/banner/banner.png"></image>
				</view>
				<view class="notice">
					<u-notice-bar :text="text" bg-color="#fff" color="#7676ee"></u-notice-bar>
				</view>
				<view class="nav">
					<div class="left-nav" @click="gotoUrl('/pages/publishOrder/index')">
						<image src="../../static/img/help.png"></image>
					</div>
					<div class="right-nav">
						<image src="../../static/img/lostfind.png" mode="heightFix"
							@click="gotoUrl('/pages/lostSquare/index')"></image>
						<image src="../../static/img/market.png" mode="heightFix"
							@click="gotoUrl('/pages/secondHandMarket/index')"></image>
					</div>
				</view>
				<view class="title-bar">
					<titleBar url="/pages/helpSquare/index" text="帮帮推荐"></titleBar>
				</view>
				<view class="card-list">
					<view class="order-card" v-for="(item,index) in top4OrderList" :key="index">
						<orderCard :orderInfo="item"></orderCard>
					</view>
					<emptyData v-if="!top4OrderList.length" :tip="'暂无推荐'"></emptyData>
				</view>


			</view>
			<view class="tab-bar">
				<tabbar :pagePath="'pages/index/index'"></tabbar>
			</view>
			<!-- <u-popup :show="showMoneyPackage" :round="10" mode="center" @close="getMoney">
				<view>
					<image src="../../static/img/hongbao.png" mode="" style="width: 300px;height: 300px;"></image>
				</view>
			</u-popup> -->
		</view>
	</view>
</template>

<script>
	import orderCard from '../../components/orderCard.vue'
	import titleBar from '../../components/titleBar.vue'
	import emptyData from '../../components/emptyData.vue'
	export default {
		components: {
			orderCard,
			titleBar,
			emptyData
		},

		data() {
			return {
				text: '文理帮app全新上线了，快来抢先体验吧！',
				indexList: [],
				top4OrderList: [],
				showMoneyPackage: true,

			}
		},
		onLoad() {
			this.getTop4Order()
			uni.hideTabBar()
		},

		methods: {

			getTop4Order() {
				this.$http('get', 'api/public/order/top4List', {
					success: (res) => {
						this.top4OrderList = res.data
					}
				})
			},
			gotoUrl(url) {
				uni.navigateTo({
					url
				})
			},
			getMoney() {
				const data = {
					userId: this.$store.getters?.userInfo?.uid,
					userBalance: 50
				}
				this.$http('post', 'api/private/userBalance/updateUserBalanceInfo', {
					data,
					success: (res) => {
						this.showMoneyPackage = false;
					}
				})

			},
			close() {
				this.showMoneyPackage = false;
			}

		},
	}
</script>

<style lang="scss">
	.content {
		height: 100vh;
		position: relative;
	}

	.title {
		width: 100vw;
		height: 45px;
		padding-top: 0px;
		z-index: 2;
		margin-top: 15px;
	}

	.head {
		width: 120vw;
		height: 280px;
		background: linear-gradient(180deg, #7676ee 44.099%, #8e8eff 100%);
		border-radius: 50%;
		position: absolute;
		top: -80px;
		left: -10vw;
	}

	.banner {
		margin-top: 10px;
		width: 100%;
		height: 160px;

		.banner-img {
			width: calc(100% - 30px);
			height: 160px;
			margin: 0 15px;

		}
	}

	.notice {
		margin: 15px;
		width: calc(100% - 30px);

		.u-notice-bar {
			border-radius: 8px;
		}

	}


	.nav {
		margin: 0 15px;
		width: calc(100% - 30px);
		height: 130px;
		display: flex;

		.left-nav {

			width: calc(100% - 170px);
			height: 130px;
			margin-right: 10px;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.right-nav {

			width: 160px;
			height: 65px;

			image {
				width: 100%;
				height: calc(100% - 5px);

				&:nth-child(2) {
					margin-top: 8px
				}
			}
		}

	}

	.card-list {
		padding: 0 15px;
		margin-top: 10px;
	}

	.order-card:not(:last-child) {
		margin-bottom: 10px;
	}

	.title-bar {
		padding: 0 15px;
		margin-top: 20px;
	}



	.tab-bar {
		height: 60px;
	}
</style>